<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>待处理订单</title>
		<link rel="stylesheet" href="./css/pending_order.css">
		<link rel="stylesheet" href="./css/bootstrap.css">
		<script src="./lib/layui/layui.js" charset="utf-8"></script>
		<script src="js/jquery.min.js"></script>
		<script src="boot/js/bootstrap.js"></script>
		<script src="js/vue.js"></script>

	</head>
	<body id="main">
		<div id="find">
			<div id="find01">
				销售订单号：<input type="text" id="order_code" value="" />
			</div>
			<div id="find02">
				
			订单类型：<select id="order_type">
						<option value="批发采购">批发采购</option>
						<option value="备货需求">备货需求</option>
					</select>
			</div>
			<div id="find03">
				订单状态：<select id="status_name">
						<option value="已提交">已提交</option>
						<option value="待上传附件">待上传附件</option>
					</select>
			</div>
			<div id="find04">
				订单日期： <div class="layui-input-inline" id="find04_1">
							 <input type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd">
						</div>
						
						<div class="layui-form-mid">-</div>
						<div class="layui-input-inline" id="find04_2">
						<input type="text" class="layui-input" id="test25" placeholder="yyyy-MM-dd">
					</div>
				</div>
			<div id="find05">
				<input type="button" name="query" id="query01" value="查询" @click="getData()" />
			</div>
			<div id="find06">
				订单金额：<div class="money01">
					<input type="text" id="money1"/>
				</div>
				<div class="layui-form-mid">-</div>
				<div class="money02">
					<input type="text" id="money2"/>
				</div>
			</div>
			
			<div id="showtable">
				<table id="table1">
					<thead>
						<tr>
							<th><input type="checkbox"></th>
							<th>序号</th>
							<th>下单日期</th>
							<th>销售订单号</th>
							<th>订单类型</th>
							<th>订单状态</th>
							<th>提货方式</th>
							<th>联系人</th>
							<th>联系电话</th>
							<th>数量</th>
							<th>订单金额</th>
							<th>区域负责人</th>
							<th>备注</th>
							<th>不通过原因</th>
							<th>操作</th>
							
						</tr>
					</thead>
					<tbody>
						<tr v-for="item in res">
							<td><input type="checkbox"></td>
							<td>{{item.id}}</td>
							<td>{{item.submit_date}}</td>
							<td>{{item.order_code}}</td>
							<td>{{item.order_type}}</td>
							<td>{{item.status_name}}</td>
							<td>{{item.send_way}}</td>
							<td>{{item.contact}}</td>
							<td>{{item.phone}}</td>
							<td>{{item.pro_num}}</td>
							<td>{{item.order_price}}</td>
							<td>{{item.dealer_name}}</td>
							<td>{{item.remark}}</td>
							<td>{{item.reject_reason}}</td>
							<td>
								<div class="btn-sm btn-success" data-toggle="modal" data-target="#commit">提交</div>
								<div class="btn-sm btn-success" data-toggle="modal" data-target="#modfiy">修改订单</div>
								<div class="btn-sm btn-warning" data-toggle="modal" data-target="#detail">查看详情</div>

							
							</td>
						</tr>
						
					</tbody>
				</table>
				<nav aria-label="Page navigation">
					<ul class="pagination" >
						<li>
							<div class="btn btn-dark">
								<a href="#" aria-label="Previous">
									<span aria-hidden="true" @click="prePage()">上一页</span>
								</a>
							</div>
						</li>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<li>
							<div class="btn btn-dark">
								<a href="#" aria-label="Next">
									<span aria-hidden="true" @click="nextPage()">下一页</span>
								</a>
							</div>
						</li>
					</ul>
				</nav>
				<!-- Modal -->
				<div class="modal fade" id="detail" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="detailstaticBackdropLabel" aria-hidden="true">
					<div class="modal-dialog modal-dialog-scrollable modal-xl">
						<div class="modal-content">
							<div class="modal-header">
								<h5 class="modal-title" id="detailstaticBackdropLabel">订单详情</h5>
								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>
							<div class="modal-body">
								<table class="table">
									<thead class="thead-dark">
									<tr >
										<th scope="col"><input type="checkbox" ></th>
										<th scope="col">提交备货计划日期</th>
										<th scope="col">区域</th>
										<th scope="col">提货方式</th>
										<th scope="col">总数量</th>
										<th scope="col">总体积</th>
										<th scope="col">需缴纳保证金</th>
										<th scope="col">地址</th>
										<th scope="col">电话</th>
									</tr>
									</thead>
									<tbody>
									<tr>
										<td><input type="checkbox"></td>
										<td>2021-10-13</td>
										<td>华东</td>
										<td>配送</td>
										<td>10</td>
										<td>100</td>
										<td>100</td>
										<td>四川省成都市路萨达路12号</td>
										<td>18900010002</td>
									</tr>
									</tbody>
								</table>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
							</div>
						</div>
					</div>
				</div>
				<!-- Modal -->
				<div class="modal fade" id="modfiy" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="modfiystaticBackdropLabel" aria-hidden="true">
					<div class="modal-dialog modal-dialog-scrollable modal-xl">
						<div class="modal-content">
							<div class="modal-header">
								<h5 class="modal-title" id="modfiystaticBackdropLabel">上传附件</h5>
								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>

							<div class="modal-body">
								<div id="tj">
									<div id="tj1" class="text">
										<p><span>广东万家乐燃气具有限公司采购申请</span></p>
									</div>
									<div id="tj02" class="text">
										客户名称：<span>苏宁江苏店</span>
									</div>
									<div id="tj03">
										客户编码:<span>GB2313231232</span>
									</div>
									<div id="tj04">
										店铺名称:<span>佳邦信息旗舰店</span>
									</div>
									<div id="tj05">
										区域:<span>热水事业部华南区</span>
									</div>
									<div id="tj06">
										提货方式:<span>配送</span>
									</div>
									<div id="tj07" class="text" style="visibility: visible;">
										<p><span>出货仓库：</span>
											<select name="仓库名称：" id="selectA" style="width: fit-content">
												<option value="CD001">四川省绵阳市先锋区显峰路12号</option>
												<option value="CD002">四川省成都市青羊区赵峰路66号</option>
												<option value="ADD001">四川省第一仓库</option>
												<option value="ADD002">四川省第二仓库</option>
												<option value="JY001">上海拉胯仓库</option>
											</select>
										</p>
									</div>
									<div id="tj08" class="text" style="visibility: visible;">
										备注：<input type="text">
									</div>
									<table class="layui-table" id="table2">
										<thead>
										<tr>
											<th>序号</th>
											<th>产品编码</th>
											<th>产品型号</th>
											<th>需求数量</th>
											<th>直接开票价(元)</th>
											<th>金额(元)</th>
											<th>体积(m^3)</th>
											<th>备注</th>
											<th>操作</th>
										</tr>
										</thead>
										<tbody>
										<tr>
											<td>1</td>
											<td>运动鞋</td>
											<td>PR0001</td>
											<td>10</td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
											<td><a href="#">删除</a></td>
										</tr>
										</tbody>
									</table>
									<input type="submit" id="submint" value="提交" data-dismiss="modal"/>
									<input type="submit" id="saveOrder" value="保存至待处理订单列表" data-dismiss="modal"/>
									<div class="btn-sm btn-warning" data-toggle="modal" data-target="#fj">上传附件</div>
								</div>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
							</div>
						</div>
					</div>
				</div>
				<!-- Modal -->
				<div class="modal fade" id="commit" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="commitstaticBackdropLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<h5 class="modal-title" id="commitstaticBackdropLabel">提交提示</h5>
								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>
							<div class="modal-body">
								您确定提交该订单至万家乐OCP全渠道数字平台吗？
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
								<button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
							</div>
						</div>
					</div>
				</div>
			</div>  
		</div>
		
	</body>
	<script>
	layui.use('laydate', function(){
	  var laydate = layui.laydate;
	 //常规用法
	   laydate.render({
	     elem: '#test1',
           type:'datetime'
	   });
	    //点我触发
	     laydate.render({
	       elem: '#test25'
	       ,eventElem: '#test25-1'
	       ,trigger: 'click',
             type: 'datetime'
	     });
	  });
	</script>
	<script src="js/pending_order.js"></script>
	<script src="js/yz.js" charset="utf-8"></script>
</html>
